<template>
	<view class="header">
		<view class="text-One">
			<fui-text text="哈尔滨华德学院" color="#000" fontWeight="500" block></fui-text>
		</view>
		<view class="text-Two">
			<fui-text text="配送至: 哈尔滨华德学院东门" size="24" color="#383838" block></fui-text>
		</view>
		<view class="notice-bar">
			<uni-notice-bar show-icon single="true" background-color="#ea6d35" color="white" text="至减轻食 定义你的完美身材" />
		</view>
		<view class="text-Three">
			<fui-text text="至减轻食" color="#383838"></fui-text>
			<fui-text text="ZhiJian" color="#a5a5a5" style="margin-left: 10px;"></fui-text>
		</view>
	</view>

	<view class="container">
		<view class="shopping-line">
			<view id="cart-icon" class="cart" ref="cart" @click="toggleCart">
				<image src="https://i-blog.csdnimg.cn/direct/a0e0cd7248194afbab159078720f18d8.png" class="cart-image" />
			</view>
			<span v-if="allPrice" class="all-price">¥<span class="all-price-text">{{ allPrice }}</span></span>
			<span class="tips" v-else>未选购商品</span>
			<view :class="[allPrice ? 'can-buy' : '', 'buy-icon']" @click="goSettle(allPrice)">去结算</view>
		</view>

		<view class="product-list">
			<view class="classify">
				<view v-for="item in classOptions" :key="item.id"
					:class="[isleftCurrent === item.id ? 'current' : '', 'classify-item']"
					@click="changeClassify(item.id)">
					<text>{{ item.name }}</text>
				</view>
			</view>

			<view class="product" v-if="filteredCombo.length > 0 || isleftCurrent === 1">
				<view>
					<view v-for="item in filteredCombo" :key="item.comboId" class="pro-item"
						:ref="'item-' + item.comboId">
						<image :src="item.comboImg" class="product-image" :id="`image-${item.id}`"
							@click="goProductOrder(item)" />
						<view class="product-content">
							<view @click="goProductOrder(item)">
								<view class="title">{{ item.comboName }}</view>
								<view class="content">{{ item.comboContain }}</view>
							</view>
							<view class="bottom">
								<span class="price">¥{{ item.comboPrice }}</span>
								<view class="bottom-right">
									<template v-if="item.comboNum">
										<view class="down" @click="handleDown(item)">-</view>
										<view class="number">{{ item.comboNum }}</view>
									</template>
									<view class="up" @click="addToCart(item)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="empty-view" v-else>
				<view style="margin-top: 20px;">
					<fui-empty src="https://res.firstui.cn/static/images/component/empty/img_data_3x.png" title="暂未开发">
						<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx"
							background="#fff" :margin="['64rpx','0']" borderColor="#333" color="#333"
							@click="goIndex"></fui-button>
					</fui-empty>
				</view>
			</view>

		</view>

		<view v-if="showCart" class="cart-popup">
			<view class="cart-popup-content">
				<view class="cart-popup-header">
					<text>购物车</text>
					<view class="cart-popup-close" @click="toggleCart">X</view>
				</view>
				<view class="cart-popup-body">
					<view v-for="item in cartItems" :key="item.comboId" class="cart-item">
						<image :src="item.comboImg" class="cart-item-image" />
						<view class="cart-item-details">
							<text class="cart-item-name">{{ item.comboName }}</text>
							<text class="cart-item-price">¥{{ item.comboPrice }}</text>
							<text class="cart-item-quantity">数量: {{ item.comboNum }}</text>
						</view>
					</view>
					<view v-if="cartItems.length === 0" class="empty-cart">购物车为空</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		url
	} from '@/utils/request.js';
	import {
		ref,
		onMounted,
		computed,
		onUnmounted,
		toRaw
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	const sandian = ref(false);
	const timer = ref(null); // 定时器引用
	const Combo = ref([]);
	const checkTimeAndExecute = () => {
		const now = new Date();
		const currentHours = now.getHours();
		const currentMinutes = now.getMinutes();

		if (currentHours === 15 && currentMinutes >= 26 && currentMinutes < 27) {
			sandian.value = true
			console.log(sandian.value,"你好")
		} else if (currentHours === 15 && currentMinutes >= 27) {
			sandian.value = false
			console.log(sandian.value,"你好")
		}
	};

	onLoad(() => {
		// 每分钟检查一次时间
		timer.value = setInterval(checkTimeAndExecute, 1000 * 60);
	});

	onUnload(() => {
		// 页面卸载时清除定时器
		if (timer.value) {
			clearInterval(timer.value);
			timer.value = null;
		}
	});

	onMounted(() => {
		// Mounted时立即检查一次时间
		checkTimeAndExecute();
		wx.request({
			url: url + '/foodCombo/userQueryAllFoodCombo',
			method: 'get',
			success: (Res) => {
				Combo.value = Res.data.data;
				Combo.value = toRaw(Combo.value).map(item => ({
					comboId: item.comboId,
					comboImg: item.comboImg,
					comboName: item.comboName,
					comboContain: item.comboContain,
					comboPrice: item.comboPrice,
					comboNum: 0,
					classId: 1 // Ensure you have the correct classId for each item
				}));
				console.log(toRaw(Combo.value));
			}
		});
	});

	onUnmounted(() => {
		// 页面卸载时清除定时器
		if (timer.value) {
			clearInterval(timer.value);
			timer.value = null;
		}
	});



	const isleftCurrent = ref(1);
	const current = ref(1);
	const allPrice = ref(0);

	const classOptions = ref([{
			name: '套餐',
			id: 1
		},
		{
			name: '单点配送',
			id: 2
		}
	]);

	const showCart = ref(false);

	const cartItems = computed(() => {
		return Combo.value.filter(product => product.comboNum > 0);
	});

	const filteredCombo = computed(() => {
		return Combo.value.filter(product => product.classId === isleftCurrent.value);
	});

	const toggleCart = () => {
		showCart.value = !showCart.value;
	};

	const changeClassify = (id) => {
		isleftCurrent.value = id;
	};

	const handleDown = (product) => {
		
		
		if (sandian.value == true) {
			if (product.comboNum > 0) {
				product.comboNum -= 1;
				allPrice.value -= product.comboPrice;
			}
		} else if (sandian.value == false) {
			uni.showModal({
				title: '提示',
				content: '每天13点到20点开放',
				confirmText: '确定',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		}
		
		
	};

	const addToCart = (product) => {
		if (sandian.value == true) {
			product.comboNum += 1;
			allPrice.value += product.comboPrice;
		} else if (sandian.value == false) {
			uni.showModal({
				title: '提示',
				content: '每天13点到20点开放',
				confirmText: '确定',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		}

	};

	const goProductOrder = (item) => {
		uni.navigateTo({
			url: `/pages/productOrder/productOrder?id=${item.comboId}&name=${item.comboName}&content=${item.comboContain}&image=${item.comboImg}`
		});
	};

	const goSettle = () => {
		if (allPrice.value > 0) {
			const cartItemsData = cartItems.value.map(item => ({
				id: item.comboId,
				name: item.comboName,
				price: item.comboPrice,
				number: item.comboNum,
				image: item.comboImg,
				content: item.comboContain
			}));

			uni.navigateTo({
				url: `/pages/settle/settle?allPrice=${allPrice.value}&cartItems=${encodeURIComponent(JSON.stringify(cartItemsData))}`
			});
		}
	};

	const goIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};
</script>

<style>
	.data-v-4ce141bc {}

	.header {
		height: 140px;
		background-color: white;
	}

	.notice-bar {
		height: 30px;
		margin: 5px 10px;
	}

	.uni-noticebar.data-v-c3453ea3 {
		display: flex;
		height: 27px;
		width: 100%;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
		border-radius: 10px;
	}

	.text-One {
		margin-left: 12px;
	}

	.text-Two {
		margin-top: 10px;
		margin-left: 12px;
	}

	.text-Three {
		margin-top: 10px;
		margin-left: 12px;
	}

	.container {
		margin-top: 10px;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.classify {
		width: 20%;
		background-color: #f8f8f8;
	}

	.classify-item {
		padding: 12px;
		font-size: 12px;
		color: #a9a8a8;
	}

	.current {
		background-color: #fff;
		color: #ff9902;
	}

	.product-list {
		flex: 1;
		display: flex;
		flex-direction: row;
		overflow-y: auto;
	}

	.title {
		font-size: 13px;
		color: #000;
		font-weight: 400;
		padding: 6px 0;
	}

	.content {
		font-size: 10px;
		color: #a9a8a8;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		line-height: 17px;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.price {
		font-weight: 600;
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 12px;
	}

	.bottom-right {
		display: flex;
		align-items: center;
	}

	.product {
		width: 80%;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 12px 12px 0 12px;
		border-bottom: 1px solid #eee;
		background-color: white;
	}

	.pro-item {
		width: 100%;
		display: flex;
		margin-top: 10px;
		align-items: center;
		border-bottom: 1px solid #f3f3f3;
	}

	.up {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #ff9902;
		text-align: center;
		line-height: 17px;
		font-weight: bold;
	}

	.move-image {
		width: 40px;
		height: 30px;
	}

	.down {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #fff;
		border: 1px solid #aaa;
		text-align: center;
		line-height: 17px;
		font-weight: bold;
	}

	.number {
		margin: 0 8px;
	}

	.product-image {
		width: 122px;
		/* Changed width here */
		height: 80px;
		margin-right: 10px;
	}

	.product-content {
		width: calc(100% - 120px);
	}

	.empty-product-image-wrapper fui-empty {
		width: 122px;
		/* Set width here */
	}

	.bezier-animation {
		position: fixed;
		width: 50px;
		height: 50px;
		z-index: 10;
		transition: transform 1s cubic-bezier(0.42, 0, 0.58, 1);
	}

	.buy-icon {
		background-color: #848282;
		color: #a7a2a2;
		font-size: 18px;
		width: 32%;
		height: 40px;
		line-height: 40px;
		border-radius: 30px;
		float: right;
		text-align: center;
		font-weight: bold;
	}

	.can-buy {
		background-color: #ff9902;
		color: #000;
	}

	.cart {
		position: absolute;
		bottom: -20px;
		left: -7px;
	}

	.cart-image {
		width: 50px;
		height: 66px;
	}

	.shopping-line {
		position: fixed;
		bottom: 10px;
		width: 90%;
		left: 5%;
		height: 40px;
		line-height: 40px;
		border-radius: 30px;
		z-index: 100;
		background-color: #3b3939;
	}

	.all-price {
		padding-left: 52px;
		color: #fff;
	}

	.all-price-text {
		font-size: 24px;
		font-weight: bold;
	}

	.tips {
		color: #a7a2a2;
		font-size: 16px;
		padding-left: 56px;
	}

	.cart-popup {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: white;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
		z-index: 200;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.cart-popup-content {
		padding: 10px;
	}

	.cart-popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.cart-popup-close {
		cursor: pointer;
	}

	.cart-popup-body {
		max-height: 300px;
		overflow-y: auto;
		padding: 10px 0;
	}

	.cart-item {
		display: flex;
		margin-bottom: 10px;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.cart-item-image {
		width: 60px;
		height: 60px;
		margin-right: 10px;
	}

	.cart-item-details {
		flex: 1;
	}

	.cart-item-name {
		font-size: 14px;
		font-weight: bold;
	}

	.cart-item-price {
		color: #ff9902;
		margin-top: 5px;
	}

	.cart-item-quantity {
		color: #888;
		margin-top: 5px;
	}

	.empty-cart {
		text-align: center;
		color: #888;
		padding: 20px 0;
	}
</style>